// 创建用户相关的仓库
import { defineStore } from 'pinia'
// import {ref, reactive} from 'vue'
import type { LoginParams, LoginResp, UserInfoResp } from '@/api/user/types'
import type { UserState } from './type'
import { reqLogin, reqUserInfo, reqLogout } from '@/api/user'
// 引入操作本地存储的工具方法
import { SET_TOKE, GET_TOKE, REMOVE_TOKE } from '@/utils/storage'
// 引入路由(常量路由)
import constantRoutes from '@/router/routes'

const useUserStore = defineStore('user', {
  // state 存储数据的地方
  state: (): UserState => {
    return {
      token: GET_TOKE(), // 用户的唯一标识 token
      menuRoutes: constantRoutes, // 仓库存储生成菜单需要数组(路由)
      username: '',
      avatar: '',
    }
  },
  // actions 异步｜逻辑的地方
  actions: {
    // 用户登录的方法
    userLogin(data: LoginParams) {
      // 登录请求
      return (
        reqLogin(data)
          // 登录成功返回 token 数据
          // .then((res: LoginResp) => {
          .then((res: LoginResp) => {
            console.log(res)
            // pinia 仓库存储一下 token
            // 由于 pinia | vuex 存储数据其实是利用 js 对象, 并非持久化的
            this.token = res
            // 本地持久化存储
            SET_TOKE(res)
          })
      )
    },

    // 获取用户信息方法
    async userInfo() {
      // 获取用户信息进行存储仓库等中[用户头像、名字]
      const result: UserInfoResp = await reqUserInfo()
      this.username = result.name
      this.avatar = result.avatar
    },

    async userLogout() {
      await reqLogout()
      // 目前没有 mock 退出登录接口，通知服务器本次用户唯一标识失效
      this.token = ''
      this.username = ''
      this.avatar = ''
      REMOVE_TOKE()
    },
  },
  getters: {},
})
// 对外暴露获取用户仓库的方法
export default useUserStore
